<template>
  <div class="index_wrap">
    <div class="index" style="height: 450px">
      <ul class="left" style="background-color: #cccccc; overflow: auto">
        <li class="leftli" style="">
          <el-tree
            ref="menuTree"
            style="width: 200px; background-color: #cccccc"
            class="filter-tree"
            :data="categoryInfo.categoryArray"
            :props="categoryProps"
            :filter-node-method="filterNode"
            accordion
            node-key="cateName"
            @node-click="handleNodeClick"
          >
            <!-- :node-click="toGoodsList()"  -->
          </el-tree>
        </li>
      </ul>

      <!-- 模板带的轮播图  -->
      <swiper-common :swiperimg="sliderimg"> </swiper-common>
    </div>

    <!-- 图书列表 -->
    <div class="goods_wrap" style="height: 1500px">
      <div class="goods" style="height: 900px">
        <h1>精品图书</h1>
        <ul>
          <li
            v-for="(book, goods_i) in bookPageInfo.records"
            :key="goods_i"
            class="goods_li"
            style="width: 24%"
          >
            <router-link :to="{ path: '/goods', query: { id: book.id } }">
              <img :src="book.bookPic" alt="" style="width: 84%" />
              <h4>{{ book.bookName }}</h4>
              <div class="detail">
                <span>价格：</span
                ><span class="onlinePrice">{{ book.price }}</span>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
      <!-- 分页 -->
      <el-pagination
        style="
          display: inline-block;
          float: right;
          font-weight: 800;
          font-size: 20px;
          margin-right: 260px;
          margin-top: 20px;
        "
        @current-change="goto"
        :page-size="bookPageInfo.size"
        layout="prev, pager, next"
        :total="bookPageInfo.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import data from "../config/config.js";
import SwiperCommon from "../common/SwiperCommon.vue";
export default {
  data() {
    return {
      categoryProps: {
        label: "cateName",
        children: "children",
      },
      categoryInfo: {
        categoryArray: [],
      },
      id: 0, //分类id
      pageInfo: {
        pageNum:1
      },      
     
      bookPageInfo: {}, //书籍分页信息

      // categoryList: {},
      goods: data.goods,
    };
  },
  created() {},
  components: { SwiperCommon },
  computed: {
    sliderimg() {
      return this.goods.map((item) => item.poster);
    },
  },
  mounted() {
    this.findBooks();
    this.getProductType();
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(e) {
      const a = this.$refs.menuTree.getNode(e.cateName);
      if (a.childNodes.length === 0) {
        console.log("⼦节点:"+e.cateId);       
        this.$router.push({path:"/goodsList",query:{cateId:e.cateId}});
      }
    },

    goto(pageNum) {
      // alert('第' + pageNum + '页')
      this.pageInfo.pageNum = pageNum;
      // alert(this.pageNum + '....')
      this.findBooks();
    },
    findBooks() {
      let formDate = new FormData();
      formDate.set("pageNum",this.pageInfo.pageNum)
      this.axios
        .post("http://localhost:8081/book/listBook",formDate)
        .then((result) => {
          console.log("123")
          console.log(result);
          this.bookPageInfo = result.data.object;
        })
        .catch();
    },

    // 展示分类
    getProductType() {
      this.axios
        .get("http://localhost:8081/category.json")
        .then((res) => {
          // 将获得到的数据赋值给options
          console.log(res);
          this.categoryInfo.categoryArray = this.getTreeData(res.data.object);
          console.log(this.categoryInfo.categoryArray);
          console.log("6666666");
        })
        .catch();
    },
    getTreeData(object) {
      // 循环遍历json数据
      for (var i = 0; i < object.length; i++) {
        if (!object[i].children) {
          // children若为空数组，则将children设为undefined
          object[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(object[i].children);
          // console.log(this.getTreeData(object[i].children))
        }
      }
      return object;
    },
  },
};
</script>

// <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index_wrap {
  width: 100%;
  height: auto;
}

.index_wrap .index {
  width: 65%;
  height: 500px;
  margin: auto;
}

.index .left {
  float: left;
  width: 200px;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.index .left .leftli {
  width: 100%;
  line-height: 35px;
  text-indent: 10px;
  text-align: left;
}

.index .left .leftli:hover {
  background: #fff;
}

.index .left .text {
  margin-left: 10px;
}

.index_wrap .goods_wrap {
  width: 100%;
  height: 500px;
  background: rgb(245, 245, 245);
  padding: 30px 0;
}

.index_wrap .goods {
  width: 65%;
  height: 500px;
  margin: auto;
  background: #fff;
}

.index_wrap .goods h1 {
  text-align: left;
  margin-left: 2%;
  padding-top: 20px;
}

.index_wrap .goods ul {
  margin: 30px 0;
}

.index_wrap .goods .goods_li {
  float: left;
  width: 25%;
}

.index_wrap .goods .goods_li:first-child {
  margin-left: 2%;
}

.index_wrap .goods .goods_li:last-child {
  width: 21%;
  margin-right: 2%;
}

.index_wrap .goods .goods_li img {
  display: block;
  width: 84%;
  overflow: hidden;
}

.index_wrap .goods .goods_li:last-child img {
  width: 100%;
}

.index_wrap .goods .goods_li h4 {
  width: 84%;
  line-height: 30px;
  margin: 10px 0;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.index_wrap .goods .goods_li .detail {
  width: 84%;
  line-height: 30px;
  color: #888;
  font-size: 12px;
  text-align: center;
}

.index_wrap .goods .goods_li .price {
  text-decoration: line-through;
}

.index_wrap .goods .goods_li .onlinePrice {
  color: #ff0036;
  font-size: 16px;
}
</style>
